<template>
  <div class="drop-container">
    <span v-if="list.length == 1 && !list[0].hide" :class="['btn-item-text', list[0].type || 'primary', list[0].disabled && 'disabled']" @click="list[0].callback">{{list[0].text}}</span>
    <div v-else class="btn-item">
      <!-- 默认先显示按钮 -->
      <span
        v-if="!item.hide"
        v-for="(item, index) in buttonList"
        :class="['btn-item-text', item.type || 'primary', item.disabled && 'disabled']"
        :key="item.name"
        @click="item.callback"
      >
        {{item.text}}
      </span>
      <!-- 然后显示下拉菜单 -->
      <Dropdown v-if="dropdownList.length > 1" class="dropdown-menu" :style="getDropdownStyle()" trigger="click" @on-click="toggleItem">
        <div class="btn-item-text primary">
          {{button.text || '请选择'}}<Icon type="ios-arrow-down"></Icon>
        </div>
        <DropdownMenu slot="list">
          <DropdownItem v-for="item in dropdownList" v-if="!item.hide" :name="item.name" :key="item.name" :class="item.readonly ? 'readonly' : ''" :disabled="!!item.disabled" :divided="!!item.divided">
            {{item.text}}
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>

<script>
import dropdownMixins from '@/mixins/dropdown'

export default {
  mixins: [dropdownMixins]
}
</script>

<style lang="less" scoped>
.drop-container {
  .btn-item {
    display: inline-block;
    .dropdown-menu {
      /deep/ .ivu-dropdown-menu {
        max-height: 300px;
        overflow-y: auto;
      }
      /deep/ .ivu-dropdown-item-disabled:hover {
        color: #c5c8ce !important;
        background-color: #fff !important;
      }
      /deep/ .readonly {
        cursor: no-drop;
        &:hover {
          background-color: #fff !important;
          color: #515a6e !important;
        }
      }
    }
  }
  .btn-item-text {
    display: inline-block;
    line-height: 20px;
    cursor: pointer;
    &:not(:first-child) {
      margin-left: 10px;
    }
    &.disabled {
      cursor: no-drop;
      color: #ccc;
    }
    &.error {
      color: #ed4014;
    }
  }
}
</style>